<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;

        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        .el-table__header tr,
        .el-table__header th {
            padding: 0;
            height: 30px;
            line-height: 30px;
        }
        .el-table__body tr,
        .el-table__body td {
            padding: 0;
            height: 80px;
            line-height: 80px;
        }
    </style>
</head>
<body>
<div id="my">
    <el-tabs type="border-card" v-model="activeName"  stretch  @tab-click="listOwn">
        <el-tab-pane label="柱状图" name="first">
            <el-container>
                <el-header>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="6"><div class="grid-content bg-purple">
                            <el-date-picker
                                    v-model="form.querDate"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                            <el-button icon="el-icon-search" circle @click="search"></el-button>
                        </div></el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <div id="container1" style="min-width:400px;height:400px"></div>
                </el-main>
            </el-container>
        </el-tab-pane>
        <el-tab-pane label="折线图" name="second">
            <el-container>
                <el-header>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="6"><div class="grid-content bg-purple">
                            <el-date-picker
                                    v-model="form.newYear"
                                    type="year"
                                    placeholder="选择年"
                                    value-format="yyyy">
                            </el-date-picker>
                            <el-button icon="el-icon-search" circle @click="searchLine"></el-button>
                        </div></el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <div id="container2" style="min-width:400px;height:400px"></div>
                </el-main>
            </el-container>
        </el-tab-pane>
    </el-tabs>

</div>
<script>
    var he=new Vue({
        el:"#my",
        data:{
            form:{},
            activeName:'first',
        },
        methods:{
            search(){
                listHistogram();
            },
            searchLine(){
                listLineChart();
            },
            listOwn(tab, event){
             if(he.activeName=="first"){
                 listHistogram();
             }else if(he.activeName=="second"){
                 listLineChart();
             }
            }
        }
    });
    listHistogram();
    function listHistogram(){
        $.post("/demo/char/listHis",he.form,function (backData) {
            getHistogram(backData.data)
        })
    };

    function getHistogram(hehe) {

        Highcharts.chart('container1', {
            chart: {
                type: 'column'
            },
            title: {
                text: '科室挂诊人数'
            },
            subtitle: {
                text: '数据截止 于此医院，来源: 张草'
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45  // 设置轴标签旋转角度
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人 (个)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: '人数: <b>{point.y} 个</b>'
            },
            series: [{
                name: '人数',
                data: hehe,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    format: '{point.y}', // :.1f 为保留 1 位小数
                    y: 10
                }
            }]
        });
    };
    function listLineChart() {
        $.post("/demo/char/listLine",he.form,function (backData) {
            getLineChart(backData.data);
        })
    }
    function getLineChart(haha) {
        Highcharts.chart('container2', {
            chart: {
                type: 'line'
            },
            title: {
                text: '月挂诊人数'
            },
            subtitle: {
                text: '数据来源: 张草'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '人数(个)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    },
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    enableMouseTracking: false
                }
            },
            series: haha,
        });

    }
</script>
</body>
</html>